<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="./layui-v2.5.7/layui-v2.5.7/layui/css/layui.css">
    <style>
      *{
        margin: 0;
        padding: 0;
      }
      body{
          height: 100vh;
          width: 100vw;
          background-color: #2d3a4b;
          display: flex;
          align-items: center;
          justify-content: center;
      }
      .container{
          width: 500px;
          height: 400px;
          display: flex;
          align-items: center;
          /*justify-content: center;*/
          flex-direction: column;
          color:#fff;
      }
      .container .btn{
          background: #46a6ff;
          color: #fff;
          width: 448px;
          text-align: center;
          border: none;
          outline: none;
          margin-top: 20px;
          height: 36px;
          line-height: 36px;
          font-size: 16px;
          font-family: Helvetica,serif;
          cursor: pointer;
          font-weight: bold;
      }
    </style>
</head>
<body>
    <div class="container">
        <h2 style="text-align: center;color:#eee;font-size: 26px;font-weight: bold;">Login Form</h2>
        <form >
            <div class="name-container" style="border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 4px;height: 50px;width: 448px;display: flex;align-items: center;margin-top: 50px;">
                <i class="layui-icon layui-icon-username" style="font-size: 24px;color: #eee;margin-left: 4px;"></i>
                <div style="display: inline-block;background-color:#2d3a4b; ">
                    <input id="name" name="username" placeholder="用户名" type="text" style="background-color: #2d3a4b;border: none;padding-left:10px;color: #fff;width: 400px;font-size:18px;height: 20px;line-height: 20px;">
                </div>
            </div>
            <div class="pwd-container" style="border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 4px;height: 50px;width: 448px;display: flex;align-items: center;margin-top: 20px;">
                <i class="layui-icon layui-icon-key" style="font-size: 24px;color: #eee;margin-left: 4px;"></i>
                <div style="display: inline-block;background-color:#2d3a4b;">
                    <input  id="pwd" name="password" placeholder="密码" type="password" style="background-color: #2d3a4b;border: none;padding-left:10px;color: #fff;width: 400px;font-size:18px;height: 20px;line-height: 20px;">
                </div>
            </div>
            <button class="btn" id="myButton">
                Login
            </button>
        </form>
    </div>
</body>
<script src="js/jquery.min.js"></script>
<script src="layui-v2.5.7/layui-v2.5.7/layui/layui.all.js"></script>
<script type="text/javascript">
    document.getElementById("myButton").onclick = function (){
        let username = $("#name").val();
        let password = $("#pwd").val();
        alert(username);
        alert(password);
        if (username === "admin" && password === "admin"){
            alert("1");
            let data = {
                "number": "2020112617",
                "username": "admin",
                "id": 0,
            }
            $.ajax({
                type: "POST",
                url: "https://localhost:8081/auth",
                data: data,
                dataType: "json",
                success: res => {
                    console.log(res.data.token);
                    localStorage.setItem("token","Bearer " + res.data.token);
                    alert("1");
                    window.location.replace("./pages/index.html");
                    alert("1");
                }
            });
        }
    }
</script>
</html>